import 'package:flutter/material.dart';
import './res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('网格列表2 builder'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  Widget _initGridViewData(context, index) {
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
      child: Column(
        children: [
          Image.network(listData[index]["imageUrl"]),
          const SizedBox(
            height: 10,
          ),
          Text(
            listData[index]["title"],
            style: const TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  }

  // @override
  // Widget build(BuildContext context) {
  //   return GridView.builder(
  //     padding: const EdgeInsets.all(10),
  //     itemCount: listData.length,
  //     gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  //       crossAxisSpacing: 10,
  //       mainAxisSpacing: 10,
  //       crossAxisCount: 2,
  //       childAspectRatio: 1.4,
  //     ),
  //     itemBuilder: _initGridViewData,
  //   );
  // }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(10),
      itemCount: listData.length,
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1.2,
        maxCrossAxisExtent: 120,
      ),
      itemBuilder: _initGridViewData,
    );
  }
}
